<template>
  <div class="nav-thirdly">
    <ul>
      <slot></slot>
    </ul>
  </div>
</template>

<script>
export default {
  name: "CTabs",
  props: {
    activeKey: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {}
  },
  methods: {
    handleTabClick (index) {
      this.$emit('handleClick', index)
    }
  }
}
</script>
<style lang="scss">
  .nav-thirdly {
    margin-left: 7px;
    margin-right: 7px;
    line-height: normal;
    ul {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 0;
      padding-left: 0;
      .content-tab-link {
        padding: 13px 0;
        margin-right: 40px;
        position: relative;
        text-align: center;
        // color: #888;
        cursor: pointer;
        .link-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        ::after {
          display: block;
          position: absolute;
          width: 0px;
          content: '';
          border-right: 2px solid #f1f1f1;
          top: calc(50% - 15px / 2);
          right: -20px;
          height: 15px;
        }
      }
      .content-tab-link:last-child {
        margin-right: 0;
      }
      .content-tab-link.active, .content-tab-link:hover {
        color: #4e8afa;
        text-decoration: none;
      }
    }
  }
</style>
